  //获取元素节点
  var small = document.getElementById('small');
  //遮罩层
  var mark = document.getElementById('mark');
  //获取大图片
  var bigImg = document.getElementById('big-img');
  //获取大盒子
  var big = document.getElementById('big');
  //为左侧盒子添加鼠标移动事件。
  small.onmousemove = function (e) {
    //为遮罩层跟着移动

    //求遮罩层的偏移量  pageX - 遮罩层宽度的一半 - 小盒子的左侧偏移量
    var m_left = e.pageX - mark.offsetWidth / 2 - small.offsetLeft
    var m_top = e.pageY - mark.offsetHeight / 2 - small.offsetTop;
    //求边界值  小盒子的宽-遮罩层的宽
    var max_left = small.offsetWidth - mark.offsetWidth;
    var max_top = small.offsetHeight - mark.offsetHeight;


    //移动之前，判断不能超出范围
    //判断左右边界
    if (m_left < 0) {
      m_left = 0
    } else if (m_left > max_left) {
      m_left = max_left
    }

    //判断上下边界
    if (m_top < 0) {
      m_top = 0
    } else if (m_top > max_top) {
      m_top = max_top
    }

    //赋值，让遮罩层动起来
    mark.style.left = m_left + "px";
    mark.style.top = m_top + "px";

    //求 大图片和小图片的比例
    var rate = bigImg.offsetWidth / small.offsetWidth
    
    //求图片移动的距离
    var imgLeft = -m_left * rate;
    var imgTop = -m_top * rate;

    bigImg.style.left = imgLeft + "px";
    bigImg.style.top = imgTop + "px";

  }

  //遮罩层/大盒子 移入显示
  small.onmouseenter = function(){
    mark.style.display = "block"
    big.style.display = "block"
  }
  //遮罩层/大盒子 移出隐藏
  small.onmouseleave = function(){
    mark.style.display = "none"
    big.style.display = "none"
  }